<template>
  <div id="login" class="login-page">
    <div class="formdiv">
      <el-form>
        <el-row :gutter="20">
          <el-col class="title" :offset="5" :span="15">
            <h1>&nbsp;&nbsp;大学教室管理系统</h1>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col class="col-label" :offset="6" :span="4">
            <span class="label" style="color: black;">账号：</span>
          </el-col>
          <el-col :span="40">
            <el-input type="text" placeholder="请输入学号" v-model="account.studentNumber"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col class="col-label" :offset="6" :span="4">
            <span class="label" style="color: black;">密码：</span>
          </el-col>
          <el-col :span="40">
            <el-input type="password" placeholder="请输入密码" v-model="account.password"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :offset="8" :span="8">
            <span>
              <a href="http://localhost:8081/register" style="color: black;">注册账号</a>
              /
              <a href="#" style="color: black;" @click="dialogVisible = true">重置密码</a>
            </span>
            <el-dialog title="重置密码" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
              <div>
                <h3>重置密码</h3>
              </div>
              <span>学号：</span><input class="h-30" v-model.number="account.studentNumber"><br>
              <span>姓名：</span><input class="h-30" v-model="account.name"><br>
              <span>密码：</span><input class="h-30" v-model="account.password"><br>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="resetPwd">确 定</el-button>
              </span>
            </el-dialog>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :offset="10" :span="4">
            <el-button type="primary" round @click="onSubmit">登录</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'login',
  data() {
    return {
      dialogVisible: false,

      account: {
        studentNumber: '',
        name: '',
        password: '',
      }
    }
  },
  methods: {
    // register() {
    //   this.$message({
    //     message: '好像没这功能',
    //     type: 'info'
    //   })
    // },
    resetPwd() {
      axios({
        url: "http://localhost:8080/user/resetPwd",
        method: "Post",
        data: this.account
      }).then(res => {
        if (res.data == "0") {
          alert("当前用户不存在！");
        }
        this.dialogVisible = false
      })

      // this.$message({
      //   message: '下辈子吧',
      //   type: 'success'
      // })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    onSubmit() {
      axios({
        url: "http://localhost:8080/user/login",
        method: "Post",
        data: this.account
      }).then(res => {
        if (res.data != "0") {
          // var xhr = new XMLHttpRequest();
          // xhr.open("POST", "/user", true);
          // xhr.setRequestHeader("Authorization", "Bearer " + token); // 将 Token 添加到请求头中
          // xhr.onreadystatechange = function() {
          //   if (xhr.readyState === 4 && xhr.status === 200) {
          //     var response = xhr.responseText;
          //     console.log(response);
          //   }
          // };
          // xhr.send();
          sessionStorage.setItem("token", res.data);
          console.log(sessionStorage.getItem("token"))
          this.$router.push('/container/classroom')
        } else {
          alert("账号或者密码错误！");
        }

      })

    }
  }
}
</script>
  
<style scoped>
.h-30 {
  height: 35px;
  margin-bottom: 10px;
}

#login {
  text-align: center;
  margin: 0 auto;
}

.label {
  height: 40px;
  line-height: 40px;
}

.col-label {
  text-align: right;
}

.el-form {
  height: 450px;
  /* width: 350px; */
  background-color: rgba(255, 255, 255, 0.65);
  padding-top: 80px;
  border-radius: 3%;
  /* padding-right: 60px; */
}

.el-row {
  padding-top: 15px;
}

.formdiv {
  padding-top: 100px;
  padding-left: 500px;
  padding-right: 500px;
  /* background-color: aliceblue; */
  /* height: 100px; */
}

.el-button {
  width: 120px;
}

/* .title {
      margin-top: 10%;
    } */
.login-page {
  height: 100vh;
  /* Set the height of the element to 100% of the viewport height */
  background-image: url('~@/assets/tianyuan.jpg');
  background-size: cover;
  background-position: center;
}
</style>